<template>
  <el-dialog
    title="承租企业"
    class="draft-dialog"
    :visible.sync="dialogDraftVisible"
    width="800px"
    append-to-body
  >
    <div>
      <el-form
        ref="form"
        :model="form"
        size="small"
        class="table-form"
        :rules="rules"
      >
        <table class="table table-bordered th-bg">
          <thead />
          <tbody>
            <tr>
              <th width="150">企业名称</th>
              <td>
                <el-form-item prop="lesseeName">
                  <el-input
                    v-model="form.lesseeName"
                  />
                </el-form-item>
              </td>
              <th width="150">占用厂房面积（㎡）</th>
              <td>

                <el-form-item prop="leaseArea">
                  <el-input
                    v-model="form.leaseArea"
                  />
                </el-form-item>
              </td>
            </tr>
          </tbody>
        </table>
        <div style="text-align: center">
          <el-form-item>
            <el-button
              type="primary"
              size="large"
              @click="submitForm"
            >
              保存
            </el-button>
          </el-form-item>
        </div>

      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import crud from '@/mixins/crud'

export default {
  name: 'OrderList',
  components: {

  },
  mixins: [crud],
  data() {
    return {
      dialogDraftVisible: false,
      isEdit: false,
      index: 0,
      form: {
        lesseeName: '',
        leaseArea: '',
      },
      originForm: {},
      projectId: 0,
      rules: {

        'lesseeName': [
          { required: false, message: '请输入企业名称', trigger: 'blur' }
        ],
        'leaseArea': [
          { required: false, message: '请输入占用厂房面积（㎡）', trigger: 'blur' }
        ],
      },
    }
  },
  methods: {

    submitForm() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          if (this.isEdit) {
            this.resetOrderForm()
          }
          return
        }
        if (!this.isEdit) {
          this.$emit('addOrderForm', this.form);
        } else {
        }
        this.dialogDraftVisible = false
      })
    },
    resetOrderForm() {
      this.$emit('resetOrderForm', this.originForm, this.index);
    },

  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.role-span {
  font-weight: bold;
  color: #303133;
  font-size: 15px;
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}

::v-deep .vue-treeselect__multi-value {
  margin-bottom: 0;
}

::v-deep .vue-treeselect__multi-value-item {
  border: 0;
  padding: 0;
}
</style>
